<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body class="page-device">
<div class="app-page">

    <div class="app-page-content">


        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="container z-df">
                        <div class="left-sidebar device-group">
                            <div class="body">
                                <div class="head">
                                    <div class="btn-group z-flex">
                                        <div class="btn btn-add">
                                            <i class="fa fa-plus"></i>
                                        </div>
                                        <div class="btn btn-edit">
                                            <i class="fa fa-pencil"></i>
                                        </div>
                                        <div class="btn btn-del">
                                            <i class="fa fa-trash"></i>
                                        </div>
                                    </div>

                                </div>
                                <ul id="tree" class="ztree"></ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <!-- 新增 -->
            <div class="popup-default z-popup z-fixed z-df z-flex-cc  z-hide">
                <div class="bg" data-popup-close=""></div>
                <!-- 新增分组 -->
                <div class="popup-add section z-hide">
                    <div class="title">新增模块</div>
                    <div class="content">
                        <form>
                            <div class="form-item row">
                                <div class="label">
                                    <label>上级模块</label>
                                </div>
                                <div class="body">
                                    <input type="hidden" name="parentId">
                                    <input type="text" disabled="disabled" class="form-control" name="parentName">
                                    <!--<span class="input-group-addon"><i class="fa fa-align-center"></i></span>-->
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="label">
                                    <label>模块名称</label>
                                </div>
                                <div class="body">
                                    <input type="text" name="moduleName" data-name="模块名称" data-rule="required">
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="label">
                                    <label>备注</label>
                                </div>
                                <div class="body">
                                    <input type="text" name="moduleDesc" data-name="备注">
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="label">
                                    <label>url</label>
                                </div>
                                <div class="body">
                                    <input type="text" name="url" data-name="url">
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="label">
                                    <label>icon</label>
                                </div>
                                <div class="body">
                                    <input type="text" name="icon" data-name="icon">
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="body">
                                    <div class="z-btn-group">
                                        <a class="z-btn z-primary btn-submit">确定</a>
                                        <a class="z-btn z-default" data-popup-close="">取消</a>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
                <!-- 分组编辑 -->
                <div class="popup-edit section z-hide">
                    <div class="title">编辑模块</div>
                    <div class="content">
                        <form>
                            <div class="form-item row">
                                <div class="label">
                                    <label>上级模块</label>
                                </div>
                                <div class="body">
                                    <input type="hidden" name="moduleId">
                                    <input type="hidden" name="parentId">
                                    <input type="text" disabled="disabled" class="form-control" name="parentName">
                                    <!--<span class="input-group-addon"><i class="fa fa-align-center"></i></span>-->
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="label">
                                    <label>模块名称</label>
                                </div>
                                <div class="body">
                                    <input type="text" name="moduleName" data-name="模块名称" data-rule="required">
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="label">
                                    <label>备注</label>
                                </div>
                                <div class="body">
                                    <input type="text" name="moduleDesc" data-name="备注">
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="label">
                                    <label>url</label>
                                </div>
                                <div class="body">
                                    <input type="text" name="url" data-name="url">
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="label">
                                    <label>icon</label>
                                </div>
                                <div class="body">
                                    <input type="text" name="icon" data-name="icon">
                                </div>
                            </div>
                            <div class="form-item row">
                                <div class="body">
                                    <div class="z-btn-group">
                                        <a class="z-btn z-primary btn-submit">修改</a>
                                        <a class="z-btn z-default" data-popup-close="">取消</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/js/tree.js}"></script>
<script th:src="@{/js/prompt.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    var tree = null;

    // 过滤器 - 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    $(function () {

        eventEmit();
        //模块
        var url = context + "/module/listModuleTree";
        App.ajax({
            type: "POST",
            url: url,
            success: function (obj) {
                var code = obj.code;
                if (code == 0) {
                    initTree(obj.data);
                }
            }
        })
    });

    function initTree(treeData) {
        // 树形控件
        tree = new Tree('.ztree', {
            type: 1,
            data: treeData,
            multiple:false,
        });

    }

    function eventEmit() {
        /*========== 事件监听 ===================================================*/

        // 分组 - 新增
        $('.device-group').on('click', '.btn-add', function () {
            popup.open(".popup-add")
            if (tree.current) {
                $('.popup-add').formLoad({
                    parentId: tree.current.moduleId,
                    parentName: tree.current.label
                });
            }
        })

        // 分组 - 编辑
        $('.device-group').on('click', '.btn-edit', function () {
            if (groupCheckboxVerify()) {
                var treeCurrent = tree.current
                $('.popup-edit').formLoad({
                    moduleId: treeCurrent.moduleId,
                    parentId: treeCurrent.pid,
                    moduleName: treeCurrent.label,
                    moduleDesc: treeCurrent.moduleDesc,
                    moduleType: treeCurrent.moduleType,
                    url: treeCurrent.url,
                    icon: treeCurrent.icon,
                })
                // 弹出分组编辑
                popup.open(".popup-edit")
            }
        })

        // 分组 - 删除
        $('.device-group').on('click', '.btn-del', function () {
            if (groupCheckboxVerify()) {
                myConfirm('确认是否删除',function(){
                    var treeCurrent = tree.current;
                    console.log("treeCurrent", treeCurrent);
                    var moduleId = treeCurrent.moduleId;
                    if (moduleId) {
                        console.log("treeCurrent_moduleId", moduleId);
                        //删除模块
                        App.ajax({
                            type: "POST",
                            url: context + "/module/delete",
                            data: {
                                moduleId: moduleId
                            },
                            success: function (obj) {
                                var code = obj.code;
                                if (code == 0) {
                                    popup.tipsTop('删除模块成功', 'success');
                                    setTimeout(function () {
                                        //跳转到模块列表
                                        window.location.href = context + "/module/list";
                                    }, 500);
                                } else {
                                    popup.tipsTop(obj.msg, 'warning');
                                }
                            }
                        })
                    } else {
                        popup.tipsTop('请选择模块', 'warning');
                    }
                });
            }
        })

        // 新增 - 弹窗保存
        $(".popup-add form").form({
            submitSelector: ".popup-add .btn-submit",
            msg: function (msg) {
                popup.tipsTop(msg, 'warning');
            },
            submit: function () {

                var data = {};

                $.each($(".popup-add form").serializeArray(), function (index, field) {
                    if (data[field.name]) {
                        data[field.name] += "," + field.value;
                    } else {
                        data[field.name] = field.value;
                    }
                })

                //保存模块
                App.ajax({
                    type: "POST",
                    url: context + "/module/save",
                    data: data,
                    success: function (obj) {
                        var code = obj.code;
                        if (code == 0) {
                            popup.tipsTop('保存模块成功', 'success');
                            setTimeout(function (args) {
                                //跳转到模块列表
                                window.location.href = context + "/module/list";
                            }, 500);
                        } else {
                            popup.tipsTop(obj.msg, 'warning');
                        }
                    }
                })
            }
        })

        // 修改
        $(".popup-edit form").form({
            submitSelector: ".popup-edit .btn-submit",
            msg: function (msg) {
                popup.tipsTop(msg, 'warning');
            },
            submit: function () {

                var data = {};

                $.each($(".popup-edit form").serializeArray(), function (index, field) {
                    if (data[field.name]) {
                        data[field.name] += "," + field.value;
                    } else {
                        data[field.name] = field.value;
                    }
                })
                //保存模块
                App.ajax({
                    type: "POST",
                    url: context + "/module/update",
                    data: data,
                    success: function (obj) {
                        var code = obj.code;
                        if (code == 0) {
                            popup.tipsTop('修改模块成功', 'success');
                            setTimeout(function (args) {
                                //跳转到模块列表
                                window.location.href = context + "/module/list";
                            }, 500);
                        } else {
                            popup.tipsTop(obj.msg, 'warning');
                        }
                    }
                })
            }
        })
    }

    // 分组选择验证
    function groupCheckboxVerify(params) {
        if (tree.checked.length < 1) {
            popup.tipsTop("请选择模块", 'warning');
            return false;
        }
        return true;
    }

</script>
</body>

</html>